import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useGame } from '../gameState';
import { containerStyles, buttonStyles, theme } from '../styles/theme';

/**
 * 结果页面组件
 * 显示AI的猜测结果和得分，提供重新开始和返回首页的选项
 */
const ResultPage: React.FC = () => {
  // 使用 React Router 的导航钩子
  const navigate = useNavigate();
  // 使用游戏状态管理
  const { state } = useGame();

  return (
    // 使用页面容器样式，确保页面居中显示
    <div style={containerStyles.page}>
      {/* 使用卡片容器样式，提供内容区域 */}
      <div style={containerStyles.card}>
        {/* 页面标题 */}
        <h1 style={theme.typography.h1}>游戏结果</h1>
        {/* 结果显示区域 */}
        <div style={{ 
          ...theme.typography.body,
          textAlign: 'center',
          marginBottom: theme.spacing.lg
        }}>
          {/* AI猜测结果 */}
          <p>AI猜测: <strong style={{ color: theme.colors.primary }}>{state.currentWord || '苹果'}</strong></p>
          {/* 得分显示 */}
          <p>得分: <strong style={{ color: theme.colors.success }}>{state.score || 85}</strong></p>
        </div>
        {/* 操作按钮组 */}
        <div style={{ 
          display: 'flex', 
          gap: theme.spacing.md,
          justifyContent: 'center'
        }}>
          {/* 再玩一次按钮 */}
          <button 
            onClick={() => navigate('/game')}
            style={buttonStyles.primary}
          >
            再玩一次
          </button>
          {/* 返回首页按钮 */}
          <button 
            onClick={() => navigate('/')}
            style={buttonStyles.secondary}
          >
            返回首页
          </button>
        </div>
      </div>
    </div>
  );
};

export default ResultPage;